<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Scrolling DataTable</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Scrolling DataTable</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
/* custom styles for this example */
.tableDemo {margin: 15px 0;}

/* css to counter global site css */
.tableDemo th {text-transform:none;}
.tableDemo table {width:auto;}

/* scrolling datatable doesn't support caption 
.dt-example caption {display:table-caption;}*/
</style>

<div class="intro">
    <p>Datatables can be made to scroll along the x and y axes. The <code>DataTableScroll</code> plugin enables this functionality.</p>

    <p>The <code>width</code> and <code>height</code> attributes trigger scrolling along the respective axis, <code>width</code> to make the table scroll along the x axis and <code>height</code> along the y axis.  Setting both <code>width</code> and <code>height</code> make the table both x and y scrollable.</p>

    <p><strong>Note:</strong> Scrolling is not currently supported on the Android WebKit browser.
</div>

<div class="example yui3-skin-sam">
    <h4>xy-Scrolling Datatable</h4>
<p>The following is a standard xy-scrolling datatable. The <code>width</code> and <code>height</code> are passed into the plugin.</p>
<div id="scrolling-xy" class="tableDemo"></div>

<h4>x-Scrolling Datatable</h4>
<p>The following is a standard x-scrolling datatable. Only the <code>width</code> is passed into the plugin. The <code>height</code> is automatically set to the entire table height. For this table, a subset of the census data is used to keep the vertical size manageable.</p>
<div id="scrolling-x" class="tableDemo"></div>

<h4>y-Scrolling Datatable</h4>
<p>The following is a standard y-scrolling datatable. Only the <code>height</code> is passed into the plugin. The <code>width</code> is automatically set to width of the container. For this table, a <code>columnset</code> with only two columns is used to keep the horizontal size manageable.</p>

<div id="scrolling-y" class="yui3-skin-sam tableDemo"></div>

<script type="text/javascript">
YUI().use("datatable-scroll", function (Y) {
    var state_census_data = [
        {ANSI: "00000", STATE: "UNITED STATES", TOTAL_POP: 307006550, LAND_AREA: 3537438.44, POP_PER_SQ_MILE: 79.6},
        {ANSI: "01000", STATE: "ALABAMA", TOTAL_POP: 4708708, LAND_AREA: 50744, POP_PER_SQ_MILE: 87.6},
        {ANSI: "02000", STATE: "ALASKA", TOTAL_POP: 698473, LAND_AREA: 571951.26, POP_PER_SQ_MILE: 1.1},
        {ANSI: "04000", STATE: "ARIZONA", TOTAL_POP: 6595778, LAND_AREA: 113634.57, POP_PER_SQ_MILE: 45.2},
        {ANSI: "05000", STATE: "ARKANSAS", TOTAL_POP: 2889450, LAND_AREA: 52068.17, POP_PER_SQ_MILE: 51.3},
        {ANSI: "06000", STATE: "CALIFORNIA", TOTAL_POP: 36961664, LAND_AREA: 155959.34, POP_PER_SQ_MILE: 217.2},
        {ANSI: "08000", STATE: "COLORADO", TOTAL_POP: 5024748, LAND_AREA: 103717.53, POP_PER_SQ_MILE: 41.5},
        {ANSI: "09000", STATE: "CONNECTICUT", TOTAL_POP: 3518288, LAND_AREA: 4844.8, POP_PER_SQ_MILE: 702.9},
        {ANSI: "10000", STATE: "DELAWARE", TOTAL_POP: 885122, LAND_AREA: 1953.56, POP_PER_SQ_MILE: 401},
        {ANSI: "11000", STATE: "DISTRICT OF COLUMBIA", TOTAL_POP: 599657, LAND_AREA: 61.4, POP_PER_SQ_MILE: 9378},
        {ANSI: "12000", STATE: "FLORIDA", TOTAL_POP: 18537969, LAND_AREA: 53926.82, POP_PER_SQ_MILE: 296.4},
        {ANSI: "13000", STATE: "GEORGIA", TOTAL_POP: 9829211, LAND_AREA: 57906.14, POP_PER_SQ_MILE: 141.4},
        {ANSI: "15000", STATE: "HAWAII", TOTAL_POP: 1295178, LAND_AREA: 6422.62, POP_PER_SQ_MILE: 188.6},
        {ANSI: "16000", STATE: "IDAHO", TOTAL_POP: 1545801, LAND_AREA: 82747.21, POP_PER_SQ_MILE: 15.6},
        {ANSI: "17000", STATE: "ILLINOIS", TOTAL_POP: 12910409, LAND_AREA: 55583.58, POP_PER_SQ_MILE: 223.4},
        {ANSI: "18000", STATE: "INDIANA", TOTAL_POP: 6423113, LAND_AREA: 35866.9, POP_PER_SQ_MILE: 169.5},
        {ANSI: "19000", STATE: "IOWA", TOTAL_POP: 3007856, LAND_AREA: 55869.36, POP_PER_SQ_MILE: 52.4},
        {ANSI: "20000", STATE: "KANSAS", TOTAL_POP: 2818747, LAND_AREA: 81814.88, POP_PER_SQ_MILE: 32.9},
        {ANSI: "21000", STATE: "KENTUCKY", TOTAL_POP: 4314113, LAND_AREA: 39728.18, POP_PER_SQ_MILE: 101.7},
        {ANSI: "22000", STATE: "LOUISIANA", TOTAL_POP: 4492076, LAND_AREA: 43561.85, POP_PER_SQ_MILE: 102.6},
        {ANSI: "23000", STATE: "MAINE", TOTAL_POP: 1318301, LAND_AREA: 30861.55, POP_PER_SQ_MILE: 41.3},
        {ANSI: "24000", STATE: "MARYLAND", TOTAL_POP: 5699478, LAND_AREA: 9773.82, POP_PER_SQ_MILE: 541.9},
        {ANSI: "25000", STATE: "MASSACHUSETTS", TOTAL_POP: 6593587, LAND_AREA: 7840.02, POP_PER_SQ_MILE: 809.8},
        {ANSI: "26000", STATE: "MICHIGAN", TOTAL_POP: 9969727, LAND_AREA: 56803.82, POP_PER_SQ_MILE: 175},
        {ANSI: "27000", STATE: "MINNESOTA", TOTAL_POP: 5266214, LAND_AREA: 79610.08, POP_PER_SQ_MILE: 61.8},
        {ANSI: "28000", STATE: "MISSISSIPPI", TOTAL_POP: 2951996, LAND_AREA: 46906.96, POP_PER_SQ_MILE: 60.6},
        {ANSI: "29000", STATE: "MISSOURI", TOTAL_POP: 5987580, LAND_AREA: 68885.93, POP_PER_SQ_MILE: 81.2},
        {ANSI: "30000", STATE: "MONTANA", TOTAL_POP: 974989, LAND_AREA: 145552.43, POP_PER_SQ_MILE: 6.2},
        {ANSI: "31000", STATE: "NEBRASKA", TOTAL_POP: 1796619, LAND_AREA: 76872.41, POP_PER_SQ_MILE: 22.3},
        {ANSI: "32000", STATE: "NEVADA", TOTAL_POP: 2643085, LAND_AREA: 109825.99, POP_PER_SQ_MILE: 18.2},
        {ANSI: "33000", STATE: "NEW HAMPSHIRE", TOTAL_POP: 1324575, LAND_AREA: 8968.1, POP_PER_SQ_MILE: 137.8},
        {ANSI: "34000", STATE: "NEW JERSEY", TOTAL_POP: 8707739, LAND_AREA: 7417.34, POP_PER_SQ_MILE: 1134.5},
        {ANSI: "35000", STATE: "NEW MEXICO", TOTAL_POP: 2009671, LAND_AREA: 121355.53, POP_PER_SQ_MILE: 15},
        {ANSI: "36000", STATE: "NEW YORK", TOTAL_POP: 19541453, LAND_AREA: 47213.79, POP_PER_SQ_MILE: 401.9},
        {ANSI: "37000", STATE: "NORTH CAROLINA", TOTAL_POP: 9380884, LAND_AREA: 48710.88, POP_PER_SQ_MILE: 165.2},
        {ANSI: "38000", STATE: "NORTH DAKOTA", TOTAL_POP: 646844, LAND_AREA: 68975.93, POP_PER_SQ_MILE: 9.3},
        {ANSI: "39000", STATE: "OHIO", TOTAL_POP: 11542645, LAND_AREA: 40948.38, POP_PER_SQ_MILE: 277.3},
        {ANSI: "40000", STATE: "OKLAHOMA", TOTAL_POP: 3687050, LAND_AREA: 68667.06, POP_PER_SQ_MILE: 50.3},
        {ANSI: "41000", STATE: "OREGON", TOTAL_POP: 3825657, LAND_AREA: 95996.79, POP_PER_SQ_MILE: 35.6},
        {ANSI: "42000", STATE: "PENNSYLVANIA", TOTAL_POP: 12604767, LAND_AREA: 44816.61, POP_PER_SQ_MILE: 274},
        {ANSI: "44000", STATE: "RHODE ISLAND", TOTAL_POP: 1053209, LAND_AREA: 1044.93, POP_PER_SQ_MILE: 1003.2},
        {ANSI: "45000", STATE: "SOUTH CAROLINA", TOTAL_POP: 4561242, LAND_AREA: 30109.47, POP_PER_SQ_MILE: 133.2},
        {ANSI: "46000", STATE: "SOUTH DAKOTA", TOTAL_POP: 812383, LAND_AREA: 75884.64, POP_PER_SQ_MILE: 9.9},
        {ANSI: "47000", STATE: "TENNESSEE", TOTAL_POP: 6296254, LAND_AREA: 41217.12, POP_PER_SQ_MILE: 138},
        {ANSI: "48000", STATE: "TEXAS", TOTAL_POP: 24782302, LAND_AREA: 261797.12, POP_PER_SQ_MILE: 79.6},
        {ANSI: "49000", STATE: "UTAH", TOTAL_POP: 2784572, LAND_AREA: 82143.65, POP_PER_SQ_MILE: 27.2},
        {ANSI: "50000", STATE: "VERMONT", TOTAL_POP: 621760, LAND_AREA: 9249.56, POP_PER_SQ_MILE: 65.8},
        {ANSI: "51000", STATE: "VIRGINIA", TOTAL_POP: 7882590, LAND_AREA: 39594.07, POP_PER_SQ_MILE: 178.8},
        {ANSI: "53000", STATE: "WASHINGTON", TOTAL_POP: 6664195, LAND_AREA: 66544.06, POP_PER_SQ_MILE: 88.6},
        {ANSI: "54000", STATE: "WEST VIRGINIA", TOTAL_POP: 1819777, LAND_AREA: 24077.73, POP_PER_SQ_MILE: 75.1},
        {ANSI: "55000", STATE: "WISCONSIN", TOTAL_POP: 5654774, LAND_AREA: 54310.1, POP_PER_SQ_MILE: 98.8},
        {ANSI: "56000", STATE: "WYOMING", TOTAL_POP: 544270, LAND_AREA: 97100.4, POP_PER_SQ_MILE: 5.1    }
    ];


    var dtScrollingXY = new Y.DataTable.Base({
        columnset: [
            {key:"ANSI"},
            {key:"STATE", label:"State"},
            {key:"TOTAL_POP", label:"Total Population"},
            {key:"LAND_AREA", label:"Land Area"},
            {key:"POP_PER_SQ_MILE", label:"Pop/Square Mile"}
        ],
        recordset: state_census_data,
        summary: "X and Y axis scrolling table"
    });
    dtScrollingXY.plug(Y.Plugin.DataTableScroll, {
        width: "300px",
        height: "150px"
    });
    dtScrollingXY.render("#scrolling-xy");

    var dtScrollingX = new Y.DataTable.Base({
        columnset: [
            {key:"ANSI"},
            {key:"STATE", label:"State"},
            {key:"TOTAL_POP", label:"Total Population"},
            {key:"LAND_AREA", label:"Land Area"},
            {key:"POP_PER_SQ_MILE", label:"Pop/Square Mile"}
        ],
        recordset: state_census_data.slice(0, 7),
        summary: "X axis scrolling table"
    });
    dtScrollingX.plug(Y.Plugin.DataTableScroll, {
        width: "250px"
    });
    dtScrollingX.render("#scrolling-x");
    
    var dtScrollingY = new Y.DataTable.Base({
        columnset: [
            {key:"STATE", label:"State"},
            {key:"TOTAL_POP", label:"Total Population"}
        ],
        recordset: state_census_data,
        summary: "Y axis scrolling table"
    });
    dtScrollingY.plug(Y.Plugin.DataTableScroll, {
        height:"200px"
    });
    dtScrollingY.render("#scrolling-y");
});

</script>

</div>

<h3>The Data</h3>
<p>This is the <code>recordset</code> data that will be used for each example table. The keys in each tables' <code>columnset</code> will correspond with the keys in the data.</p>

<pre class="code prettyprint">var sampleData = [
    { ANSI: &quot;00000&quot;, STATE: &quot;UNITED STATES&quot;, TOTAL_POP: 307006550, LAND_AREA: 3537438.44, POP_PER_SQ_MILE: 79.6 },
    { ANSI: &quot;01000&quot;, STATE: &quot;ALABAMA&quot;, TOTAL_POP: 4708708, LAND_AREA: 50744, POP_PER_SQ_MILE: 87.6 },
    { ANSI: &quot;02000&quot;, STATE: &quot;ALASKA&quot;, TOTAL_POP: 698473, LAND_AREA: 571951.26, POP_PER_SQ_MILE: 1.1 },
    { ANSI: &quot;04000&quot;, STATE: &quot;ARIZONA&quot;, TOTAL_POP: 6595778, LAND_AREA: 113634.57, POP_PER_SQ_MILE: 45.2 },
    ...
];</pre>


<h3>Instantiation &amp; Plugin</h3>
<p>The <code>DataTableScroll</code> plugin is packaged in the <code>datatable-scroll</code> module.</p>

<pre class="code prettyprint">YUI().use(&#x27;datatable-scroll&#x27;, function (Y) {
   ...
});</pre>


<p>Plug <code>DataTableScroll</code> into the <code>DataTable</code> instance before the call to <code>render()</code>.  Configure the plugin to limit the rendered table dimensions by <code>height</code> or <code>width</code>.</p>

<p>The first table will be configured to scroll on both X and Y axes by setting both <code>height</code> and <code>width</code>.</p>

<pre class="code prettyprint">var dtScrollingXY = new Y.DataTable.Base({
    columnset: sampleCols,
    recordset: sampleData,
    summary: &quot;X and Y axis scrolling table&quot;
});

&#x2F;&#x2F;Creating an xy-scrolling datatable with specific width and height
dtScrollingXY.plug(Y.Plugin.DataTableScroll, {
    width: &quot;300px&quot;,
    height: &quot;100px&quot;
});

&#x2F;&#x2F; Pass render() the CSS selector of the container element
dtScrollingXY.render(&quot;#scrolling-xy&quot;);</pre>


<h3>Setting a scrolling direction</h3>
<p>The <code>width</code> and <code>height</code> values passed into the <code>datatable-scroll</code> plugin determine the scrolling directions on that particular datatable instance. The following rules apply:</p>
<ol>
    <li>If a width and height are both passed in through the configuration object, the datatable will support scrolling in 'x' and 'y' directions.</li>
    <li>If only a width is passed in, the datatable will only support x-scrolling, and its height will default to <code>auto</code></li>
        <li>If only a height is passed in, the datatable will only support y-scrolling, and its width will default to <code>auto</code></li>
            <li>If neither width nor height are passed in, the datatable will not scroll, and both attributes will default to <code>auto</code></li>
</ol>

<h5>Notes</h5>
<ol>
    <li>Even if a width and height is passed in, the table will not scroll if it can entirely fit into the specified viewport. However, if additional rows are added, scrollbars will be available immediately.</li>
    <li>The widths and heights of the scrolling data-table can currently only be set during initialization. They cannot be modified after the table has been displayed, and modifying them will not enable a certain scrolling direction.</li>
</ol>

<h3>Full Code Listing</h3>

<pre class="code prettyprint">&lt;h4&gt;xy-Scrolling Datatable&lt;&#x2F;h4&gt;
&lt;p&gt;The following is a standard xy-scrolling datatable. The &lt;code&gt;width&lt;&#x2F;code&gt; and &lt;code&gt;height&lt;&#x2F;code&gt; are passed into the plugin.&lt;&#x2F;p&gt;
&lt;div id=&quot;scrolling-xy&quot; class=&quot;tableDemo&quot;&gt;&lt;&#x2F;div&gt;

&lt;h4&gt;x-Scrolling Datatable&lt;&#x2F;h4&gt;
&lt;p&gt;The following is a standard x-scrolling datatable. Only the &lt;code&gt;width&lt;&#x2F;code&gt; is passed into the plugin. The &lt;code&gt;height&lt;&#x2F;code&gt; is automatically set to the entire table height. For this table, a subset of the census data is used to keep the vertical size manageable.&lt;&#x2F;p&gt;
&lt;div id=&quot;scrolling-x&quot; class=&quot;tableDemo&quot;&gt;&lt;&#x2F;div&gt;

&lt;h4&gt;y-Scrolling Datatable&lt;&#x2F;h4&gt;
&lt;p&gt;The following is a standard y-scrolling datatable. Only the &lt;code&gt;height&lt;&#x2F;code&gt; is passed into the plugin. The &lt;code&gt;width&lt;&#x2F;code&gt; is automatically set to width of the container. For this table, a &lt;code&gt;columnset&lt;&#x2F;code&gt; with only two columns is used to keep the horizontal size manageable.&lt;&#x2F;p&gt;

&lt;div id=&quot;scrolling-y&quot; class=&quot;yui3-skin-sam tableDemo&quot;&gt;&lt;&#x2F;div&gt;

&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
YUI().use(&quot;datatable-scroll&quot;, function (Y) {
var state_census_data = [
    {ANSI: &quot;00000&quot;, STATE: &quot;UNITED STATES&quot;, TOTAL_POP: 307006550, LAND_AREA: 3537438.44, POP_PER_SQ_MILE: 79.6},
    {ANSI: &quot;01000&quot;, STATE: &quot;ALABAMA&quot;, TOTAL_POP: 4708708, LAND_AREA: 50744, POP_PER_SQ_MILE: 87.6},
    {ANSI: &quot;02000&quot;, STATE: &quot;ALASKA&quot;, TOTAL_POP: 698473, LAND_AREA: 571951.26, POP_PER_SQ_MILE: 1.1},
    {ANSI: &quot;04000&quot;, STATE: &quot;ARIZONA&quot;, TOTAL_POP: 6595778, LAND_AREA: 113634.57, POP_PER_SQ_MILE: 45.2},
    {ANSI: &quot;05000&quot;, STATE: &quot;ARKANSAS&quot;, TOTAL_POP: 2889450, LAND_AREA: 52068.17, POP_PER_SQ_MILE: 51.3},
    {ANSI: &quot;06000&quot;, STATE: &quot;CALIFORNIA&quot;, TOTAL_POP: 36961664, LAND_AREA: 155959.34, POP_PER_SQ_MILE: 217.2},
    {ANSI: &quot;08000&quot;, STATE: &quot;COLORADO&quot;, TOTAL_POP: 5024748, LAND_AREA: 103717.53, POP_PER_SQ_MILE: 41.5},
    {ANSI: &quot;09000&quot;, STATE: &quot;CONNECTICUT&quot;, TOTAL_POP: 3518288, LAND_AREA: 4844.8, POP_PER_SQ_MILE: 702.9},
    {ANSI: &quot;10000&quot;, STATE: &quot;DELAWARE&quot;, TOTAL_POP: 885122, LAND_AREA: 1953.56, POP_PER_SQ_MILE: 401},
    {ANSI: &quot;11000&quot;, STATE: &quot;DISTRICT OF COLUMBIA&quot;, TOTAL_POP: 599657, LAND_AREA: 61.4, POP_PER_SQ_MILE: 9378},
    {ANSI: &quot;12000&quot;, STATE: &quot;FLORIDA&quot;, TOTAL_POP: 18537969, LAND_AREA: 53926.82, POP_PER_SQ_MILE: 296.4},
    {ANSI: &quot;13000&quot;, STATE: &quot;GEORGIA&quot;, TOTAL_POP: 9829211, LAND_AREA: 57906.14, POP_PER_SQ_MILE: 141.4},
    {ANSI: &quot;15000&quot;, STATE: &quot;HAWAII&quot;, TOTAL_POP: 1295178, LAND_AREA: 6422.62, POP_PER_SQ_MILE: 188.6},
    {ANSI: &quot;16000&quot;, STATE: &quot;IDAHO&quot;, TOTAL_POP: 1545801, LAND_AREA: 82747.21, POP_PER_SQ_MILE: 15.6},
    {ANSI: &quot;17000&quot;, STATE: &quot;ILLINOIS&quot;, TOTAL_POP: 12910409, LAND_AREA: 55583.58, POP_PER_SQ_MILE: 223.4},
    {ANSI: &quot;18000&quot;, STATE: &quot;INDIANA&quot;, TOTAL_POP: 6423113, LAND_AREA: 35866.9, POP_PER_SQ_MILE: 169.5},
    {ANSI: &quot;19000&quot;, STATE: &quot;IOWA&quot;, TOTAL_POP: 3007856, LAND_AREA: 55869.36, POP_PER_SQ_MILE: 52.4},
    {ANSI: &quot;20000&quot;, STATE: &quot;KANSAS&quot;, TOTAL_POP: 2818747, LAND_AREA: 81814.88, POP_PER_SQ_MILE: 32.9},
    {ANSI: &quot;21000&quot;, STATE: &quot;KENTUCKY&quot;, TOTAL_POP: 4314113, LAND_AREA: 39728.18, POP_PER_SQ_MILE: 101.7},
    {ANSI: &quot;22000&quot;, STATE: &quot;LOUISIANA&quot;, TOTAL_POP: 4492076, LAND_AREA: 43561.85, POP_PER_SQ_MILE: 102.6},
    {ANSI: &quot;23000&quot;, STATE: &quot;MAINE&quot;, TOTAL_POP: 1318301, LAND_AREA: 30861.55, POP_PER_SQ_MILE: 41.3},
    {ANSI: &quot;24000&quot;, STATE: &quot;MARYLAND&quot;, TOTAL_POP: 5699478, LAND_AREA: 9773.82, POP_PER_SQ_MILE: 541.9},
    {ANSI: &quot;25000&quot;, STATE: &quot;MASSACHUSETTS&quot;, TOTAL_POP: 6593587, LAND_AREA: 7840.02, POP_PER_SQ_MILE: 809.8},
    {ANSI: &quot;26000&quot;, STATE: &quot;MICHIGAN&quot;, TOTAL_POP: 9969727, LAND_AREA: 56803.82, POP_PER_SQ_MILE: 175},
    {ANSI: &quot;27000&quot;, STATE: &quot;MINNESOTA&quot;, TOTAL_POP: 5266214, LAND_AREA: 79610.08, POP_PER_SQ_MILE: 61.8},
    {ANSI: &quot;28000&quot;, STATE: &quot;MISSISSIPPI&quot;, TOTAL_POP: 2951996, LAND_AREA: 46906.96, POP_PER_SQ_MILE: 60.6},
    {ANSI: &quot;29000&quot;, STATE: &quot;MISSOURI&quot;, TOTAL_POP: 5987580, LAND_AREA: 68885.93, POP_PER_SQ_MILE: 81.2},
    {ANSI: &quot;30000&quot;, STATE: &quot;MONTANA&quot;, TOTAL_POP: 974989, LAND_AREA: 145552.43, POP_PER_SQ_MILE: 6.2},
    {ANSI: &quot;31000&quot;, STATE: &quot;NEBRASKA&quot;, TOTAL_POP: 1796619, LAND_AREA: 76872.41, POP_PER_SQ_MILE: 22.3},
    {ANSI: &quot;32000&quot;, STATE: &quot;NEVADA&quot;, TOTAL_POP: 2643085, LAND_AREA: 109825.99, POP_PER_SQ_MILE: 18.2},
    {ANSI: &quot;33000&quot;, STATE: &quot;NEW HAMPSHIRE&quot;, TOTAL_POP: 1324575, LAND_AREA: 8968.1, POP_PER_SQ_MILE: 137.8},
    {ANSI: &quot;34000&quot;, STATE: &quot;NEW JERSEY&quot;, TOTAL_POP: 8707739, LAND_AREA: 7417.34, POP_PER_SQ_MILE: 1134.5},
    {ANSI: &quot;35000&quot;, STATE: &quot;NEW MEXICO&quot;, TOTAL_POP: 2009671, LAND_AREA: 121355.53, POP_PER_SQ_MILE: 15},
    {ANSI: &quot;36000&quot;, STATE: &quot;NEW YORK&quot;, TOTAL_POP: 19541453, LAND_AREA: 47213.79, POP_PER_SQ_MILE: 401.9},
    {ANSI: &quot;37000&quot;, STATE: &quot;NORTH CAROLINA&quot;, TOTAL_POP: 9380884, LAND_AREA: 48710.88, POP_PER_SQ_MILE: 165.2},
    {ANSI: &quot;38000&quot;, STATE: &quot;NORTH DAKOTA&quot;, TOTAL_POP: 646844, LAND_AREA: 68975.93, POP_PER_SQ_MILE: 9.3},
    {ANSI: &quot;39000&quot;, STATE: &quot;OHIO&quot;, TOTAL_POP: 11542645, LAND_AREA: 40948.38, POP_PER_SQ_MILE: 277.3},
    {ANSI: &quot;40000&quot;, STATE: &quot;OKLAHOMA&quot;, TOTAL_POP: 3687050, LAND_AREA: 68667.06, POP_PER_SQ_MILE: 50.3},
    {ANSI: &quot;41000&quot;, STATE: &quot;OREGON&quot;, TOTAL_POP: 3825657, LAND_AREA: 95996.79, POP_PER_SQ_MILE: 35.6},
    {ANSI: &quot;42000&quot;, STATE: &quot;PENNSYLVANIA&quot;, TOTAL_POP: 12604767, LAND_AREA: 44816.61, POP_PER_SQ_MILE: 274},
    {ANSI: &quot;44000&quot;, STATE: &quot;RHODE ISLAND&quot;, TOTAL_POP: 1053209, LAND_AREA: 1044.93, POP_PER_SQ_MILE: 1003.2},
    {ANSI: &quot;45000&quot;, STATE: &quot;SOUTH CAROLINA&quot;, TOTAL_POP: 4561242, LAND_AREA: 30109.47, POP_PER_SQ_MILE: 133.2},
    {ANSI: &quot;46000&quot;, STATE: &quot;SOUTH DAKOTA&quot;, TOTAL_POP: 812383, LAND_AREA: 75884.64, POP_PER_SQ_MILE: 9.9},
    {ANSI: &quot;47000&quot;, STATE: &quot;TENNESSEE&quot;, TOTAL_POP: 6296254, LAND_AREA: 41217.12, POP_PER_SQ_MILE: 138},
    {ANSI: &quot;48000&quot;, STATE: &quot;TEXAS&quot;, TOTAL_POP: 24782302, LAND_AREA: 261797.12, POP_PER_SQ_MILE: 79.6},
    {ANSI: &quot;49000&quot;, STATE: &quot;UTAH&quot;, TOTAL_POP: 2784572, LAND_AREA: 82143.65, POP_PER_SQ_MILE: 27.2},
    {ANSI: &quot;50000&quot;, STATE: &quot;VERMONT&quot;, TOTAL_POP: 621760, LAND_AREA: 9249.56, POP_PER_SQ_MILE: 65.8},
    {ANSI: &quot;51000&quot;, STATE: &quot;VIRGINIA&quot;, TOTAL_POP: 7882590, LAND_AREA: 39594.07, POP_PER_SQ_MILE: 178.8},
    {ANSI: &quot;53000&quot;, STATE: &quot;WASHINGTON&quot;, TOTAL_POP: 6664195, LAND_AREA: 66544.06, POP_PER_SQ_MILE: 88.6},
    {ANSI: &quot;54000&quot;, STATE: &quot;WEST VIRGINIA&quot;, TOTAL_POP: 1819777, LAND_AREA: 24077.73, POP_PER_SQ_MILE: 75.1},
    {ANSI: &quot;55000&quot;, STATE: &quot;WISCONSIN&quot;, TOTAL_POP: 5654774, LAND_AREA: 54310.1, POP_PER_SQ_MILE: 98.8},
    {ANSI: &quot;56000&quot;, STATE: &quot;WYOMING&quot;, TOTAL_POP: 544270, LAND_AREA: 97100.4, POP_PER_SQ_MILE: 5.1    }
];


var dtScrollingXY = new Y.DataTable.Base({
    columnset: [
        {key:&quot;ANSI&quot;},
        {key:&quot;STATE&quot;, label:&quot;State&quot;},
        {key:&quot;TOTAL_POP&quot;, label:&quot;Total Population&quot;},
        {key:&quot;LAND_AREA&quot;, label:&quot;Land Area&quot;},
        {key:&quot;POP_PER_SQ_MILE&quot;, label:&quot;Pop&#x2F;Square Mile&quot;}
    ],
    recordset: state_census_data,
    summary: &quot;X and Y axis scrolling table&quot;
});
dtScrollingXY.plug(Y.Plugin.DataTableScroll, {
    width: &quot;300px&quot;,
    height: &quot;150px&quot;
});
dtScrollingXY.render(&quot;#scrolling-xy&quot;);

var dtScrollingX = new Y.DataTable.Base({
    columnset: [
        {key:&quot;ANSI&quot;},
        {key:&quot;STATE&quot;, label:&quot;State&quot;},
        {key:&quot;TOTAL_POP&quot;, label:&quot;Total Population&quot;},
        {key:&quot;LAND_AREA&quot;, label:&quot;Land Area&quot;},
        {key:&quot;POP_PER_SQ_MILE&quot;, label:&quot;Pop&#x2F;Square Mile&quot;}
    ],
    recordset: state_census_data.slice(0, 7),
    summary: &quot;X axis scrolling table&quot;
});
dtScrollingX.plug(Y.Plugin.DataTableScroll, {
    width: &quot;250px&quot;
});
dtScrollingX.render(&quot;#scrolling-x&quot;);

var dtScrollingY = new Y.DataTable.Base({
    columnset: [
        {key:&quot;STATE&quot;, label:&quot;State&quot;},
        {key:&quot;TOTAL_POP&quot;, label:&quot;Total Population&quot;}
    ],
    recordset: state_census_data,
    summary: &quot;Y axis scrolling table&quot;
});
dtScrollingY.plug(Y.Plugin.DataTableScroll, {
    height:&quot;200px&quot;
});
dtScrollingY.render(&quot;#scrolling-y&quot;);
});

&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="This example illustrates simple DataTable use cases.">
                                        <a href="datatable-basic.html">Basic DataTable</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get">
                                        <a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO.">
                                        <a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Custom format data for display.">
                                        <a href="datatable-formatting.html">Formatting Row Data for Display</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable with nested column headers.">
                                        <a href="datatable-nestedcols.html">Nested Column Headers</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable with column sorting.">
                                        <a href="datatable-sort.html">Column Sorting</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable with vertical and/or horizontal scrolling rows.">
                                        <a href="datatable-scroll.html">Scrolling DataTable</a>
                                    </li>
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable.">
                                        <a href="../panel/panel-form.html">Creating a modal form</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
